<!--
 * @Author: zhangweinan
 * @Date: 2023-07-27 21:00:15
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-07-27 23:11:23
 * @Description: file content
 * @FilePath: \cty-admin\src\views\agentdashboard\index.vue
-->
<template>
  <div v-loading="loading" class="dashboard-container">
    <PanelGroup :info="statisticsInfo" />
    <el-row style="margin-top: 20px">
      <div class="chart-wrapper">
        <div class="title">收益统计图</div>
        <chart
          v-if="flag"
          height="80%"
          width="100%"
          :xdata="xdata"
          :avg-total-profit="avgTotalProfit"
          :device-count="deviceCount"
        />
      </div>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from "./components/panel-group.vue";
import chart from "./components/lineChart.vue";
import { getBusinessDataInfo, getUserDailyQuantityLine } from "@/api/system";
export default {
  // name: "Dashboard",
  components: {
    PanelGroup,
    chart,
  },
  data() {
    return {
      loading: false,
      statisticsInfo: {},
      avgTotalProfit: [],
      deviceCount: [],
      xdata: [],
      flag: false,
    };
  },
  mounted() {
    this.getBusinessDataInfo();
    //获取分析数据
    this.getData();
  },
  created() {
    document.body.className = "dashboard";
  },
  beforeDestroy() {
    document.body.className = "";
  },
  methods: {
    getBusinessDataInfo() {
      this.loading = true;
      getBusinessDataInfo().then((res) => {
        this.statisticsInfo = res.data;
        this.loading = false;
      });
    },
    getData() {
      this.flag = false;
      getUserDailyQuantityLine().then((res) => {
        let { deviceCount, profit, xdata } = res.data;
        this.deviceCount = deviceCount || [];
        this.avgTotalProfit = profit || [];
        this.xdata = xdata || [];
        this.flag = true;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 20px;
    line-height: 46px;
  }
}
.chart-wrapper {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 16px;
  height: 600px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}
.title {
  padding: 10px 0 10px;
  font-size: 18px;
}
</style>
<style lang="scss">
.dashboard .app-main {
  height: auto;
}
</style>
